{include file="public/header"}
<title>房源详情</title>
      <style>
          body{
            width:100%;
            height:100%;
            margin:0;
            padding:0;
            background-color: #fff;
          }
          /*头部*/
          .top{
            height: 60px;
            width: 100%;
            background:rgba(22,26,39,1);
          }
          .top_box{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            align-items: center;

          }
          .top_name_left{
            width:38px;
            height:38px;
            background:rgba(52,99,230,1);
            border-radius:10px;
            margin-right: 10px;
          }
          .top_name{
            height:60px;
            font-size:24px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(255,255,255,1);
            line-height:60px;
          }
          .top_name_r{
            width:76px;
            height:30px;
            border-radius:15px;
            border:1px solid rgba(255,255,255,1);
            margin-left:26px;
            align-items: center;
            justify-content: center;
            display: flex;
          }
          .top_name_r img{
            height: 16px;
            width: 16px;
          }
          .top_name_r span{
            height:22px;
            line-height: 22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-left: 3px;
          }
          .lii{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:#84868D;
            line-height:22px;
            margin-right: 24px;
          }
          .white{
            color: #fff;
          }
          .top_login{
            margin-left: 36px;
            display: flex;
            align-items: center;
          }
          .top_login img{
            width: 28px;
            height: 28px;
          }
          .top_login span{
            height:22px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:22px;
            margin-left: 8px;
          }
          .top_marginR{
            margin-right: 16px;
          }
          /*头部*/

          /*footer1样式*/
          .footer{
            width:100%;
            height:130px;
            background:rgba(31,31,31,1);
            display: flex;
            align-items: center;
          }
          .footer_in{
            width: 1210px;
            margin: 0 auto;
            height:18px;
            font-size:13px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:18px;
          }
          /*footer1样式*/

          /*导航*/
          .content{
            width: 100%;
            background-color: #F5F5F6;
          }
          .navigation{
            width: 1200px;
            margin: 0 auto;
            height: 56px;
            font-size:12px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            display: flex;
            align-items: center;
          }
          .navigation img{
            height: 14px;
            width: 14px;
          }
          .navigation_title{
            width: 1200px;
            margin: 0 auto;
            height: 70px;
            margin-top: 10px;
            font-size:26px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
          }
          /*导航*/
          /*内容*/
          .contents{
            width: 1200px;
            margin: 0 auto;
            padding-top: 40px;
          }
          .swiper_introduction{
            width: 430px;
            margin-left: 60px;
          }
          .swiper_introduction_title{
            width: 100%;
            height: 50px;
            border-bottom: 1px solid  #EDEDED;
            align-items: flex-end;
          }
          .swiper_introduction_title_num{
            font-size:42px;
            font-family:Helvetica-Bold;
            font-weight:bold;
            color:rgba(231,99,76,1);
            margin-right: 24px;
            display:table-cell; /*按照单元格的样式显示元素*/
            vertical-align:bottom; /*底对齐*/
            padding-bottom: 14px;
          }
          .swiper_introduction_title_num span{
            font-size:16px;
          }
          .swiper_introduction_title_num2{
            font-size:16px;
            font-family:Helvetica-Bold;
            color:rgba(51,51,51,1);
            padding-bottom: 20px;
          }
          .swiper_introduction_title_num2 span{
          font-weight:bold;
          }
          .swiper_introduction_title_coll{
            width: 100px;
            height:38px;
            background:rgba(52,99,230,1);
            border-radius:4px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 20px;
            cursor: pointer;
          }
          .swiper_introduction_title_coll img{
            height: 18px;
            width: 18px;
          }
          .swiper_introduction_title_coll span{

            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(255,255,255,1);
            margin-left: 3px;
          }
          .swiper_introduction_con{
            height: 70px;
            border-bottom: 1px solid #EDEDED;
            display: flex;
            align-items: center;
            font-size:22px;
            font-family:Helvetica-Bold;
            font-weight:bold;
            color:rgba(51,51,51,1);
          }
          .swiper_introduction_con span{
            margin-right: 15px;
          }
          .swiper_introduction_con span:last-child{
            margin-right: 0px;
          }
          .swiper_introduction_xin{
            padding: 20px 0;
            border-bottom: 1px solid #EDEDED;
          }
          .swiper_introduction_ci span{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(51,51,51,1);
          }
          .swiper_introduction_ci:nth-child(2){
            margin: 10px 0;
          }
          .swiper_introduction_ci span:first-child{
            width: 70px;
            color:rgba(153,153,153,1);
          }
          .swiper_introduction_tou{
            height: 60px;
            padding: 20px 0;
            display: flex;
            align-items: center;
          }
          .swiper_introduction_tou img{
            height: 60px;
            width: 60px;
            margin-right: 11px;
          }
          .swiper_introduction_tou span{
            font-size:22px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
          }
          .swiper_introduction_tel{
            width:252px;
            height:46px;
            background:rgba(52,99,230,1);
            border-radius:4px;
            display: flex;
            align-items: center;
            font-size:22px;
            font-family:PingFangSC-Semibold;
            font-weight:600;
            color:rgba(255,255,255,1);
          }
          .swiper_introduction_tel img{
            width: 22px;
            height: 22px;
            margin-right: 6px;
            margin-left: 30px;
          }

          .swiper_introduction_telonline{
            width:121px;
            height:44px;
            background:rgba(245,248,253,1);
            border-radius:4px;
            border:1px solid rgba(52,99,230,1);
            display: flex;
            align-items: center;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(90,137,234,1);
            margin-left: 10px;
          }
          .swiper_introduction_telonline img{
            width: 14px;
            height: 14px;
            margin-right: 5px;
            margin-left: 23px;
          }
          /*内容*/

          /*房源简介*/
          .house_det{
            margin: 94px 0 60px;
          }
          .house_det_title{
            margin-bottom: 20px;
            font-size:23px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            line-height:32px;
          }
          .house_det_p{
            margin-bottom: 20px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
          }
          /*房源简介*/

          /*swiper2*/
          .swiper-containerrr{
            height: 360px;
            width: 1220px;
          }
          .swiper2{
            overflow: hidden;
            height: 360px;
            width: 1210px;
            margin-bottom: 70px;
          }
          .card{
            width:285px;
            height:331px;
            background:rgba(255,255,255,1);
            box-shadow:0px 2px 6px 0px rgba(0,0,0,0.06);
            border-radius:4px;
            margin-right: 20px;
          }

          .card img{
            width: 100%;
            height: 213px;
            border-radius:4px 4px 0 0;
          }
          .card_word{
            width:257px;
            height:48px;
            font-size:16px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(51,51,51,1);
            line-height:24px;
            margin: 20px 14px 6px;
            overflow: hidden;
          }
          .card_add{
            display: flex;
            align-items: center;
            margin: 0 14px;
          }
          .card_add_word{
            height:24px;
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(153,153,153,1);
            line-height:24px;
            margin-right: 10px;
          }
          .card_add_num{
            height:24px;
            font-size:16px;
            font-family:Helvetica-Bold;
            font-weight:bold;
            color:rgba(231,99,76,1);
            line-height:24px;
          }
          .swiper-button-prev2{
            height: 40px;
            width: 40px;
            background:rgba(0,0,0,0.4);
            border-radius:0px 4px 4px 0px;
            left: 0;
            top: 107px;
          }
          .swiper-button-prev2::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_left.png') no-repeat center center;
            background-size:22px 22px;
          }
          .swiper-button-next2{
            height: 40px;
            width: 40px;
            background:rgba(0,0,0,0.4);
            border-radius: 4px 0px 0px 4px;
            right: 20px;
            top: 107px;
          }
          .swiper-button-next2::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_right.png') no-repeat center center;
            background-size:22px 22px;
          }
          .card:hover{
            box-shadow:0px 10px 20px 0px rgba(0,0,0,0.08);
          }
          /*swiper2*/

          /*swiper1*/

          .swiper{
            height: 492px;
            width: 710px;
          }
          .bgc{
            background-color: red;
            width: 100%;
            height: 400px;
          }
          .swiper-slide-img{
            width: 100%;
            height: 400px;
          }
          .swiper-slide-img1{
            width: 120px;
            height: 84px;
          }
          #thumbs .swiper-slide{
          line-height:90px!important;
          opacity:0.4;
          }
          #thumbs .swiper-slide-thumb-active{
          opacity:1;
          }
          .swiper-containerr{
            width: 632px;
            margin-top: 4px;
          }



          .swiper-button-prev1{
            height: 84px;
            width: 32px;
            background:rgba(51,51,51,1);
            left: 0;
            top: 430px;
          }
          .swiper-button-prev1::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_left.png') no-repeat center center;
            background-size:22px 22px;
          }
          .swiper-button-next1{
            height: 84px;
            width: 32px;
            background:rgba(51,51,51,1);
            right: 0px;
            top: 430px;
            z-index: 500;
          }
          .swiper-button-next1::after{
            content: ' ';
            height: 22px;
            width: 22px;
            position: absolute;
            left: calc(50% - 11px);
            top: calc(50% - 11px);
            background: url('__IMG__/back_right.png') no-repeat center center;
            background-size:22px 22px;
          }
          .swiper{
            position: relative;
          }
          /*swiper1*/
      </style>
<style>
  .con_li_label{
    height: 30px;
    margin-top: 24px;
  }
  .con_li_labels{
    min-width: 60px;
    height:30px;
    background:rgba(230,237,255,1);
    border-radius:4px;
    margin-right: 10px;
    font-size:13px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(53,86,179,1);
    line-height: 30px;
    text-align: center;
    padding: 0 10px;
  }
  .hidden{
    display: none;
  }
  .aui-ellipsis-1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal !important;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
</style>
  <body>
<div class="content">
  <div class="navigation">
    <span>置家优选</span>
    <img src="__IMG__/jiantou_right.png" alt="">
    <span>
      {if $data.h_type==1}租房{/if}
      {if $data.h_type==2}二手房{/if}
      {if $data.h_type==3}新房{/if}
    </span>
    <img src="__IMG__/jiantou_right.png" alt="">
    <span>详情</span>
  </div>
  <div class="navigation_title">
    {$data.h_title}
  </div>
</div>


<div class="contents flex-wrap">
    <div class="swiper">
      <div class="swiper-container"  id="gallery">
          <div class="swiper-wrapper">
            {if $data.h_video && $data.h_video != ''}
            <div class="swiper-slide">
              <video src="{$data.h_video}" class="swiper-slide-img" id="qqq" controls controlslist="nodownload" oncontextmenu = "return false">
                您的浏览器不支持 video 标签。
              </video>
            </div>
            {/if}
            {volist name="$data['h_images']" id='img'}
              <div class="swiper-slide"><img src="{$img}" alt="" class="swiper-slide-img" style="object-fit: fill;"></div>
            {/volist}
          </div>
      </div>

      <div class="swiper-container swiper-containerr"  id="thumbs">
          <div class="swiper-wrapper">
            {if $data.h_video && $data.h_video != ''}
            <div class="swiper-slide swiper-slide-img1">
              <video src="{$data.h_video}" class="swiper-slide-img1">
                您的浏览器不支持 video 标签。
              </video>
            </div>
            {/if}
            {volist name="$data['h_images']" id='img'}
            <div class="swiper-slide swiper-slide-img1"><img src="{$img}" alt="" class="swiper-slide-img1" style="object-fit: fill;"></div>
            {/volist}
          </div>
      </div>
      <div class="swiper-button-prev swiper-button-prev1" style="outline: none;"></div><!--左箭头-->
      <div class="swiper-button-next swiper-button-next1" style="outline: none;"></div><!--右箭头-->
    </div>
    <div class="swiper_introduction">
      <div class="swiper_introduction_title flex-wrap">
        <div class="swiper_introduction_title_num">
          {if $data.h_type == 1}
          {$data.h_price}元/<span>月</span>
          {else /}
          {$data.h_price}<span>万</span>
          {/if}
        </div>
        <div class="swiper_introduction_title_num2 flex-con">
          {if $data.h_type != 1}
      <span>{$data.h_unit_price}&nbsp;</span>元/平米
          {/if}
        </div>
        <div class="swiper_introduction_title_coll" onclick="likeyesorno({$data.h_id});">
          <!--TODO：收藏-->
          <img class="scimg {if $like == 1}hidden{/if}" src="__IMG__/star.png" alt="">
          <span class="scspan">
            {if $like == 1}
            已收藏
            {else /}
            收藏房源
            {/if}
          </span>
        </div>
      </div>
      <div class="swiper_introduction_con flex-wrap">
        <span class="aui-ellipsis-2">
          {$data.h_shis}室{$data.h_tings}厅{$data.h_weis}卫 &nbsp;
          {$fix[$data.h_fix]} &nbsp;
          {$data.h_mianji}平米 &nbsp;
          {$data.h_xiaoqu} &nbsp;
        </span>
      </div>
      <div class="swiper_introduction_xin">
        <div class="swiper_introduction_ci">
          <span>小区名称</span>
          <span>{$data.h_xiaoqu}</span>
        </div>
        <div class="swiper_introduction_ci">
          {if $data.h_type == 1}
          <span>租期</span>
          <span>1个月起租</span>
          {else /}
          <span>首付</span>
          <span>{$data.h_first}%</span>
          {/if}

        </div>
        {if $data.h_type == 1}
        <div class="swiper_introduction_ci">
          <span>看房时间</span>
          <span>
            {if $data.h_kan == 1}随时看房{/if}
            {if $data.h_kan == 2}电话预约{/if}
            {if $data.h_kan == 3}休息日{/if}
          </span>
        </div>
        {else /}
        <div class="swiper_introduction_ci">
          <span>税费</span>
          <span>
            {if $data.h_shui == 1}满2年{/if}
            {if $data.h_shui == 2}满5年{/if}
            {if $data.h_shui == 3}不满2年{/if}
          </span>
        </div>
        {/if}
      </div>
      <!--标签-->
      <div class="swiper_introduction_con flex-wrap" style="border-bottom:none;height: 30px;line-height: 30px;padding-top: 20px">
        <span style="font-size: 18px">{if $data.h_type == 1}房屋配置{else /}附属物{/if}</span>

      </div>
      <div class="con_li_label flex-wrap swiper_introduction_xin" style="margin: 0">
        {if $data['h_more'] != ''}
          {volist name="$data['h_more']" id='h'}
          <div class="con_li_labels">
            {$mores[$h]}
          </div>
          {/volist}
        {else /}
          <div class="con_li_labels">
            无
          </div>
        {/if}
      </div>
      <!--end-->
      <div style="float: right;width: 205px;height: 170px;margin-top: 0;text-align: center">
        <img src="{$data.user_ercode}" width="100" height="100" />
        <div style="line-height: 20px;height: 20px;font-size: 16px;text-align: center;width: 200px;">微信扫码打电话</div>
        <div style="line-height: 30px;height: 30px;font-size: 14px;text-align: center;width: 200px;color:gray;">扫码失败可拨打</div>
        <div style="line-height: 20px;height: 20px;font-size: 18px;text-align: center;width: 200px;color: orange;">{$jjrPhone}</div>
      </div>
      <div class="swiper_introduction_tou">
        <img src="{$data.user_image}" style="border-radius: 50%;object-fit: cover;">
        <span>{$data.user_username}<br/><span style="font-size: 16px">{$data.user_shop}</span></span>
      </div>
      <div class="flex-wrap">
        <!--<div class="swiper_introduction_tel">-->
          <!--<img src="__IMG__/phones.png" alt="">-->
          <!--<span>{$data.h_contact}</span>-->
        <!--</div>-->
        <div class="swiper_introduction_telonline">
          <img src="__IMG__/say.png" alt="">
          <span onclick="gettalk({$data.h_user_id});">在线沟通</span>
        </div>
      </div>
    </div>
</div>



<div class="contents">
  <div class="house_det">
    <div class="house_det_title">
      房源介绍
    </div>
    <div class="house_det_p">
      {$data.h_jianjie}
    </div>
  </div>
  <!--地图start-->
  <style>
    .amap-icon img {
      width: 25px;
      height: 34px;
    }

    .amap-marker-label{
      position: absolute;
      z-index: 2;
      border: 1px solid blue;
      background-color: white;
      white-space: nowrap;
      cursor: default;
      padding: 3px;
      font-size: 12px;
      line-height: 14px;
      border: 0;
      background-color: transparent;
    }

    .info{
      padding: .75rem 1.25rem;
      margin-bottom: 1rem;
      border-radius: .25rem;
      position: fixed;
      top: 1rem;
      background-color: white;
      width: auto;
      min-width: 22rem;
      border-width: 0;
      right: 1rem;
      box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
      position: relative;
      top: 0;
      right: 0;
      min-width: 0;
    }
  </style>
  <div id="container" style="width:80%;height: 350px;">

  </div>
  <!--地图end-->
  <!--小区信息和风格推荐 start -->
  <style>
    .one_sfj{
      width:50%;
    }
    .tsfj1{
      font-size:23px;
      font-weight:500;
      color:rgba(51,51,51,1);
      margin-bottom:44px;
    }
    .tsfj2{
      font-size:23px;
      font-weight:500;
      color:rgba(51,51,51,1);
      margin-bottom:20px;
    }
    .left_sfj{
      font-size:16px;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin-bottom:30px;
    }
    .content_sfj{
      display: inline-block;
      width:78px;
      color:rgba(160,160,163,1);
    }
    .circle_sfj{
      width:192px;
      height:192px;
    }
    .right_sfj{
      font-size:16px;
      font-weight:600;
      color:rgba(140,140,140,1);
      margin-left:44px;
    }
    .dian_sfj1{
      width:10px;
      height:10px;
      border-radius:50%;
      background-color:#000000;
      margin-right:5px;
    }
    .dian_sfj2{
      width:10px;
      height:10px;
      border-radius:50%;
      background-color:#EB7760;
      margin-right:5px;
    }
    .dian_sfj3{
      width:10px;
      height:10px;
      border-radius:50%;
      background-color:#5278E3;
      margin-right:5px;
    }
    .dian_sfj4{
      width:10px;
      height:10px;
      border-radius:50%;
      background-color:#EBCE60;
      margin-right:5px;
    }
    .front_sfj{
      margin-right:58px;
    }
    .middle_sfj{
      margin-top:25px;
      margin-bottom:33px;
    }
    .btn_sfj{
      width:264px;
      height:46px;
      background:rgba(235,250,242,0.6);
      border-radius:4px;
      border:1px solid rgba(106,182,144,1);
      font-size:14px;
      font-weight:400;
      color:rgba(106,182,144,1);
      line-height:46px;
      text-align: center;
    }
    .top_sfj{
      margin-bottom:22px;
    }
    .pic_sfj{
      position: relative;
      width:285px;
      height:213px;
      margin-bottom:80px;
    }
    .pic_sfj:nth-child(4n+1),.pic_sfj:nth-child(4n+2),.pic_sfj:nth-child(4n+3){
      margin-right:20px;
    }
    .pic_sfj img{
      width:285px;
      height:213px;
    }
    .mb_sfj{
      position: absolute;
      bottom:0;
      left:0;
      height:50px;
      background:rgba(0,0,0,0.3);
      width:255px;
      padding-left:30px;
      font-size:23px;
      font-weight:500;
      color:rgba(255,255,255,1);
      line-height:50px;
    }
  </style>
  <div style="clear: both;width: 100%;height: 20px;"></div>
  <div class="top_sfj flex-wrap">
    <div class="one_sfj">
      <div class="tsfj1">{$xiaoqu.dis_name ?: '暂无'}&nbsp;
        {if $xiaoqu}
        <span style="float: right;padding-right: 100px;cursor: pointer;" onclick="goxiaoqudetail({$xiaoqu.dis_id});">查看更多>></span>
        {/if}
      </div>
      <div class="flex-wrap">
        <div class="flex-con">
          <div class="left_sfj"><span class="content_sfj">总面积</span>{$xiaoqu.dis_mianji ?: '暂无'} ㎡</div>
          <div class="left_sfj"><span class="content_sfj">停车位</span>{$xiaoqu.dis_part ?: '暂无'} 个</div>
          <div class="left_sfj"><span class="content_sfj">物业费</span>{$xiaoqu.dis_wuyefei ?: '暂无'} 元/㎡</div>
          <div class="left_sfj"><span class="content_sfj">开发商</span>{$xiaoqu.dis_kaifa ?: '暂无'} </div>
        </div>
        <div class="flex-con">
          <div class="left_sfj"><span class="content_sfj">规划数</span>{$xiaoqu.dis_house ?: '暂无'} 户</div>
          <div class="left_sfj"><span class="content_sfj">容积率</span>{$xiaoqu.dis_rongji ?: '暂无'} </div>
          <div class="left_sfj"><span class="content_sfj">绿化率</span>{$xiaoqu.dis_lvhua ?: '暂无'} %</div>
          <div class="left_sfj"><span class="content_sfj">物业公司</span>{$xiaoqu.dis_wuyecom ?: '暂无'}</div>
        </div>
      </div>
    </div>
    {if $daikuan.zuzu == 1}
    <div class="one_sfj">
      <div class="tsfj2">贷款计算</div>
      <div class="flex-wrap">
        <!-- 环形图 -->
        <div class="circle_sfj" id="circle_sfj">

        </div>
        <!-- 环形图 -->
        <div class="right_sfj">
          <div class="flex-wrap">
            <div class="front_sfj"><span class="dian_sfj1"></span>总价:{$daikuan['allprice']}万</div>
            <div><span class="dian_sfj2"></span>首付:{$daikuan['shoufu']}万</div>
          </div>
          <div class="middle_sfj flex-wrap">
            <div class="front_sfj"><span class="dian_sfj3"></span>商贷:{$daikuan['dai']}万</div>
            <div><span class="dian_sfj4"></span>利息:{$daikuan['lixi']}万</div>
          </div>
          <div class="btn_sfj" onclick="location.href='{:url('home/Jisuan/homePage')}'">计算器</div>
        </div>
      </div>
    </div>
    <input type="hidden" id="dddkkk" value="1" />
    {else /}
    <input type="hidden" id="dddkkk" value="2" />
    {/if}
  </div>
    <!--装修风格-->
    <div class="tsfj2">装修风格推荐</div>
    <div class="flex-wrap">
      {volist name='cases' id='ca'}
      <div class="pic_sfj">
        <img src="{$ca.cc_thumb}" style="object-fit: cover;cursor: pointer" onclick="location.href='{:url('home/Renovation/casedetail')}?cc_id={$ca['cc_id']}'">
        <div class="mb_sfj">{$ca.cc_style}</div>
      </div>
      {/volist}
    </div>
  <!--小区信息和风格推荐  end -->
  <style>
    .person{
      padding:30px 0px;
      border-bottom:1px solid #EDEDED;
    }
    .avatar{
      width:133px;
      height:160px;
      border-radius:4px;
      margin-right:35px;
      object-fit: cover;
      cursor: pointer;
    }
    .name1{
      font-size:20px;
      font-weight:500;
      color:rgba(51,51,51,1);
    }
    .kefu{
      width:34px;
      height:32px;
      margin-left:21px;
      cursor: pointer;
    }
    .addr{
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
      margin-top:15px;
    }
    .phone{
      font-size:26px;
      font-weight:bold;
      color:rgba(106,182,144,1);
      margin-bottom:7px;
    }
    .phone1{
      font-size:14px;
      font-weight:400;
      color:rgba(153,153,153,1);
    }
  </style>
  <div style="clear: both;width: 100%;height: 20px;"></div>
  <div class="house_det_title">
    小区经纪人
  </div>
      <div>
        {volist name='tjuser' id='u'}
        <div class="person flex-wrap">
          <img src="{$u.user_image}" class="avatar" onclick="location.href='{:url('home/Economic/getDesignInfo')}?uid={$u['user_id']}'">
          <div class="flex-con">
            <div style="float: right;width:205px;height: 170px;margin-top: 0;text-align: center;">
              <img src="{$u.user_ercode}" width="100" height="100" />
              <div style="line-height: 20px;height: 20px;font-size: 16px;text-align: center;width: 200px;">微信扫码打电话</div>
              <div style="line-height: 30px;height: 30px;font-size: 14px;text-align: center;width: 200px;color:gray;">扫码失败可拨打</div>
              <div style="line-height: 20px;height: 20px;font-size: 18px;text-align: center;width: 200px;color: orange;">{$jjrPhone}</div>
            </div>
            <div class="name1 flex-wrap">
              <div style="cursor: pointer;" onclick="location.href='{:url('home/Economic/getDesignInfo')}?uid={$u['user_id']}'">{$u.user_username}</div>
              <img src="__IMG__/kefu.png" class="kefu" onclick="gettalk({$u.user_id});">
            </div>
            <div class="addr">{$u.user_shop}</div>

          </div>
        </div>
        {/volist}
      </div>
  <div style="clear: both;width: 100%;height: 20px;"></div>
  <div class="house_det_title">
    推荐房源
  </div>
  <div class="swiper2">
    <div class="swiper-container swiper-containerrr" id="swiper2">
      <div class="swiper-wrapper">
        {volist name='tuijian' id='t'}
        <div class="swiper-slide cardss" style="cursor: pointer;" onclick="godetail({$t.h_id});">
          <div class="card" style="cursor: pointer;">
            <img src="{$t.h_img}" alt="" style="object-fit: cover;">
            <div class="card_word">
              {$t.h_title}
            </div>
            <div class="card_add flex-wrap">
              <div class="card_add_word">
                {$t.h_xiaoqu}
              </div>
              <div class="card_add_word">
                {$t.h_shis}室{$t.h_tings}厅
              </div>
              <div class="flex-con"></div>
              <div class="card_add_num">
                {if $t.h_type == 1}
                {$t.h_price}/月
                {else /}
                {$t.h_price}万
                {/if}
              </div>
            </div>
          </div>
        </div>
        {/volist}
      </div>
      <div class="swiper-button-prev swiper-button-prev2" id="swiper-button-prev1"></div>
      <div class="swiper-button-next swiper-button-next2" id="swiper-button-next1"></div>
    </div>
  </div>
</div>

{include file="public/wechat"}
{include file="public/foot1"}
  </body>
  </html>
<script src="/static/admin/js/jquery.min.js"></script>
<script src="__JS__/swiper4.min.js"></script>
<script src="__JS__/echarts.min.js" ></script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3108d268226b46915b5faa028a004245&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<script>
  //去掉仨点
  var a = $('#qqq');
  a[0]['disablePictureInPicture'] = true;
  //去掉仨点console.log(video);
    $('#qqq').click(function () {
        if($("#qqq")[0].paused){
            $("#qqq")[0].play();
        }else{
            $("#qqq")[0].pause();
        }
//        alert(12111)

//        $(this).pause();
    })
    //-------------------跳转到详情----------------------
    function godetail(hid) {
        window.location.href = '/home/Index/houseInfo?h_id='+hid;
    }
  function goxiaoqudetail(dis_id) {
      window.location.href = '/home/Index/disInfo?dis_id='+dis_id;
  }
    //-----------------------end------------------
</script>
<script>
    // var mySwiper1 = new Swiper ('#swiper1', {
    //   direction: 'horizontal', // 垂直切换选项
    //   loop: true, // 循环模式选项
    //   autoplay:true,//等同于以下设置
    //   spaceBetween: 10,
    //   slidesPerView: 4,
    //   watchSlidesVisibility: true,//防止不可点击
    //
    // })
    var thumbsSwiper = new Swiper('#thumbs',{
        spaceBetween: 10,
        slidesPerView: 5,
        watchSlidesVisibility: true,

    })
    var gallerySwiper = new Swiper('#gallery',{
        spaceBetween: 10,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: thumbsSwiper,
        }
    })
    var mySwiper2 = new Swiper ('#swiper2', {
        direction: 'horizontal', // 垂直切换选项
        loop: false, // 循环模式选项
        // autoplay:true,//等同于以下设置
        // autoplayDisableOnInteraction: false,
        slidesPerView : 4,
        navigation: {
            nextEl: '#swiper-button-next1',
            prevEl: '#swiper-button-prev1',
        },
    })
</script>

<script type="text/javascript">
  function likeyesorno(hid) {
      $.ajax({
          url: '/home/Index/houseLikeOrNo',
          data: 'h_id='+hid,
          type: 'POST',
          dataType: 'JSON',
          success: function (returnData) {
              if(returnData.status == 200){
                  if(returnData.now == 1){
                      $('.scimg').removeClass('hidden');
                      $('.scspan').text('收藏房源');
                  }else{
                      $('.scimg').addClass('hidden');
                      $('.scspan').text('已收藏');
                  }
//                  location.reload();
              }else if(returnData.status == 404){
                  location.href='{:url('home/Login/indexLogin')}'
              }else{
                  alert(returnData.msg)
              }
          },
          error: function () {
              alert('服务器错误，请刷新重试！');
          }
      })
  }
</script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [{$data.h_lon}, {$data.h_lat}],
        zoom: 13
    });

    var marker = new AMap.Marker({
        position: map.getCenter(),
        icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
        offset: new AMap.Pixel(-13, -30)
    });
    marker.setMap(map);
    // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        offset: new AMap.Pixel(0, 15),  //设置文本标注偏移量
        content: "<div class='info'>{$data.h_xiaoqu}</div>", //设置文本标注内容
        direction: 'top' //设置文本标注方位
    });
</script>
<script>
  var ddkk = $('#dddkkk').val();
  if(ddkk == 1){
      five()
  }
    function five() {
        var myChart = echarts.init(document.getElementById('circle_sfj'));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                data: []
            },
            title: {
                text: '参考月供',
                subtext: {$daikuan['yuegong']}+'元/月',
                x: 'center',
                y: 'center',
                top: '40%',
                textStyle: {
                    fontSize: 10,
                    fontWeight: 400,
                    color:'#CFD2D8'
                },
                subtextStyle: {
                    fontSize: 10,
                    color: '#333',
                    fontWeight: 400
                }
            },
            series: [
                {
                    name: '单价：万元',
                    type: 'pie',
                    radius: ['40%', '80%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: {$daikuan['lixi']}, name: '利息'},
                        {value: {$daikuan['shoufu']}, name: '首付'},
                        {value: {$daikuan['dai']}, name: '商贷'}
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = ['#F1CD47', '#FC6E58','#4679EB'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>
